<template>
  <div class="chip-container">
    <div v-for="(item, index) in tagArray" :key="index">
      <!-- <el-check-tag class="tag" :checked="item.checked" @change="onChange">{{
        item.type
      }}</el-check-tag> -->
      <Chip
        :model="item"
        @chipChange="chipChange"
        :chipType="chipType"
        :isOnly="isOnly"
        :ref="(el) => (chipArray[index] = el)"
      >
        <template #chipContent="{ model }">
          <!-- {{ model.tag }} -->
          <slot name="chip" :model="model"></slot>
        </template>
      </Chip>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onCreated, onMounted, nextTick } from "vue";
import { inject } from "vue";
import Chip from "@/components/common/Chip.vue";

export default {
  setup(props, { emit }) {
    const $http = inject("$http");
    const tagArray = reactive(props.tagArray);
    const chipType = ref(props.chipType);
    const chipArray = ref([]);

    var SelectArray = reactive([]);
    var isOnly = false;

    //**获取选中的chip */
    function chipChange(model) {
      if (model.value.checked) {
        // 开启单选模式
        if (chipType.value == "radio") {
          if (SelectArray.length < 1) {
            SelectArray.push(model);
            // tagArray[5].value.checked = true;
            setRadio(true);
          }
        } else {
          SelectArray.push(model);
        }
      } else {
        SelectArray = SelectArray.filter(function (item) {
          return item.value.id != model.value.id;
        });
        setRadio(false);
      }
      emit("allSelectChips", SelectArray);
    }

    function setRadio(value) {
      nextTick(() => {
        chipArray.value.forEach((item) => {
          item.getParams(value);
        });
      });
    }

    return {
      //   onChange,
      tagArray,
      chipChange,
      chipType,
      isOnly,
      chipArray,
      setRadio,
    };
  },
  components: {
    Chip,
  },
  props: ["tagArray", "chipType"],
};
</script>
RadiusButton

<style scoped>
.chip-container {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  margin: auto 0.5rem;
}
</style>
